<template>
  <div>
    <h3>计数器</h3>
    <!-- 最小值 min
    最大值 max
    描述文字 label
    精度 percision
    步数 step
    严格步数 step-strictly
    尺寸 size
    按钮位置 controls-position
    -->
    <el-input-number v-model="inputNumber" :min="1" :max="10" label="描述文字" @change="numberChange" :step="2"
      step-strictly :precision="2" size="small" controls-position="right">
    </el-input-number>
    <h3>选择器</h3>
    <!--
    multiple 设置多选
    collapse-tags 将多选标签组成一段文字
    filterable 可搜索的
    clearable 可清空单选
    -->
    <el-select v-model="selectVal" multiple placeholder="请选择" collapse-tags filterable>
      <el-option-group v-for="city in selectData" :key="city.label" :label="city.label">
        <el-option v-for="item in city.option" :key="item.label" :label="item.label" :value="item.value">
          <span style="float:left">{{item.label}}</span>
          <span style="float:right">{{item.value}}</span>
        </el-option>
      </el-option-group>
    </el-select>
    <h3>级联选择器</h3>
    <!--
    :show-all-levels="false" 仅显示最后一级
    multiple:'true' 多选
    checkStrictly:true 任意层级选择
    -->
    <el-cascader v-model="cascaderVal" :options="cascaderData" :props="{expandTrigger:'hover',multiple:'true',checkStrictly:true}"
      @change="cascaderChange" clearable filterable :show-all-levels="false">
      <!-- <template slot-scope="{node,data}">
      <span>{{data.label}}</span>
      <span v-if="!node.isLeaf">{{data.children.length}}</span>
    </template> -->
    </el-cascader>
    <h3>开关</h3>
    <el-switch v-model="switchVal" active-color="#13ce66" inactive-color="#ff4949" active-text="开" inactive-text="关"
      active-value="0" inactive-value="1" @change="switchChange"></el-switch>
    <!--
    :show-stops="true"
    range
    height="200px"
    vertical -->
    <h3>滑块</h3>
    <el-slider v-model="silderVal" :format-tooltip="formatTooltip" :step="10" range height="200px" vertical :show-stops="true"
      :marks="sliderMarks">
    </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        sliderMarks: {
          0: '0°',
          8: '8°',
          50: '50°',
          90: {
            style: {
              color: 'red',
            },
            label: this.$createElement('strong', '90%')
          }

        },
        silderVal: [50, 75],
        switchVal: '0',
        cascaderVal: '',
        selectVal: '',
        inputNumber: '',
        selectData: [{
          label: '热门城市',
          option: [{
            value: 'shanghai',
            label: '上海',
          }, {
            value: 'beijing',
            label: '北京',
          }]
        }, {
          label: '城市名',
          option: [{
            value: 'chengdu',
            label: '成都',
          }, {
            value: 'changsha',
            label: '长沙',
          }]
        }],
        cascaderData: [{
          label: '浙江',
          value: 'zhejiang',
          children: [{
            value: 'jiaxing',
            label: '嘉兴',
            children: [{
              value: 'nanhuqu',
              label: '南湖区'
            }, {
              value: 'xiuzhouqu',
              label: '秀洲区'
            }]
          }, {
            value: 'hangzhou',
            label: '杭州',
            children: [{
              value: 'shangchengqu',
              label: '上城区'
            }, {
              value: 'xihuqu',
              label: '西湖区'
            }, {
              value: 'xiachengqu',
              label: '下城区'
            }]
          }]
        }, {
          label: '湖南',
          value: 'hunan',
          children: [{
            value: 'changsha',
            label: '长沙',
            children: [{
              value: 'yueluqu',
              label: '岳麓区'
            }, {
              value: 'tianxinqu',
              label: '天心区'
            }, {
              value: 'yuhauqu',
              label: '雨花区'
            }]
          }, {
            value: 'zhuzhou',
            label: '株洲',
            children: [{
              value: 'tianyuanqu',
              label: '天元区'
            }, {
              value: 'hetangqu',
              label: '荷塘区'
            }, {
              value: 'shifengqu',
              label: '石峰区'
            }]
          }]
        }]
      }
    },
    components: {

    },
    methods: {
      formatTooltip(value) {
        return value / 100;
      },
      switchChange(value) {
        console.log(value);
      },
      cascaderChange(value) {
        console.log(value);
      },
      numberChange(value) {
        console.log(value);
      }
    }
  }
</script>

<style>

</style>
